<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .list{
        display: flex;
    }
    li{
        width: 300px;
        height: 300px;
    }
    img{
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <ul class="list">
        <li>
            <img src="" alt="">
        </li>
    </ul>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        let str='';
        $.ajax({
            method:'get',
            url:'http://localhost:8080/banner',
            success:(data)=>{
                // data 对象 data.data 数组
                // 拿到数据之后 分析数据类型 数组 遍历
                console.log(data);
                // for(let i=0;i<data.data.length;i++){
                //     console.log(data.data[i]);
                //     str += `
                //             <li>
                //                 <img src="${data.data[i].src}" alt="">
                //                 <div>${data.data[i].name}</div>
                //             </li>
                //             `
                // }
                // console.log(str);
                $.each(data.data,(index)=>{
                    str += `
                //             <li>
                //                 <img src="${data.data[index].src}" alt="">
                //                 <div>${data.data[index].name}</div>
                //             </li>
                //             `
                })
                $('.list').html(str);
            },
            error:(err)=>{
                console.log(err);
            }
        })
    </script>
</body>
</html>